<template>
  <div>
    <!-- 根标签就是指最外面的那个包住所有内容的标签 -->
    <div>我是div3232322344444444444444444</div>
    <h3>我是h3</h3>

    <p>{{ msg }}</p>

    <ul>
      <!-- vscode我们装了个 vetur 的插件 -->
      <!-- 这个插件内部也包含了语法检查工具 -->
      <!-- 所以这个插件发现你这句代码不符合规范，就报错 -->
      <!-- 但是这个报错只是vscode内部报错，不算项目报错 -->
      <!-- 所以你可以不管，因为网页依然会正常运行 -->
      <!-- 写v-for还是尽量写个key -->
      <!-- 写key时推荐：有id用id，没有id用下标 -->
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      <p>这是新的p标签</p>
    </ul>

    <!-- 使用组件 -->
    <son />

    <son2 />

    <panel />

    <panel />
    
  </div>
</template>

<script>
// 导入son.vue这个组件
// import son from './components/son.vue'
// 如果导入的是.vue文件，那么.vue的后缀可以省略
// 如果导入的是.js文件也可以省略，他默认先找.js再找.vue
import son from './components/son'

// 导入折叠面板
import panel from './components/panel'

// 导入son2
import son2 from './components/son2'

// vue里声明一个变量，要写在data里
export default {
  // 注册子组件
  components: {
    // 左边key是注册的名字
    // 右边是对应的组件
    // 如果这样写，就代表要用 xx 来访问这个组件
    // xx: son
    // 一般不改名字
    // 注意：组件名不能是原生标签名
    son,
    panel,
    son2
  },
  data() {
    return {
      msg: '马杀鸡',
      list: ['刘备','张飞','关羽','赵云']
    };
  },
};
</script>

<style>
</style>